<template>
    <div style="display: flex;">
        <!-- 左侧 -->
        <div style="width: 100px;">
            <van-sidebar v-model="active">
                <van-sidebar-item :title="item.cat_name" v-for="item in sidebar" />
            </van-sidebar>
        </div>
        <!-- 右侧 -->
        <div style="flex: 1;">
            <div style="width: 100%;">
                <div v-for="item in sidebar[active]?.children">
                    <h3>{{ item.cat_name }}</h3>
                    <van-grid :column-num="3">
                        <van-grid-item v-for="value in item.children" :key="value" :icon="value.cat_icon"
                            :text="value.cat_name" @click="pushgoods(value.cat_id)" />
                    </van-grid>

                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { classifyApi } from '../../request/api'
import { useRouter } from 'vue-router'
const router = new useRouter()
const active = ref(0)
const sidebar = ref([])
classifyApi().then(res => {
    sidebar.value = res.data.message
})
//跳转
const pushgoods = (cid) => {
    router.push({
        path: '/goods',
        query: {
            cid
        }
    })
}
</script>

<style lang="scss" scoped></style>